<template>
  <div id="mapqq" style="width: 100%; height: 600px; margin-top: 10px"></div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Mapqq',
  props: {
    geometries: {
      type: Array,
      default() {
        return []
      }
    }
  },
  // setIdList
  data() {
    return {
      // 保存地图实例
      mapOne: null
    }
  },
  computed: {
    ...mapGetters([
      'codeList'
    ])
  },
  watch: {
    geometries: function (newValue) {
      this.locationHandler()
    }
  },
  async mounted() {
    this.locationHandler()
  },
  methods: {
    // 生成地图
    locationHandler(lng, lat) {
      this.$nextTick(() => {
        var map = new BMapGL.Map('mapqq') // 创建Map实例
        var point1 = new BMapGL.Point(116.404, 39.915)
        map.centerAndZoom(point1, 5) // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
        // 开启地图模式
        // map.setMapType(BMAP_EARTH_MAP)
        this.mapOne = map
        map.clearOverlays()
        // 循环所有坐标，生成坐标点
        this.getUserList(map)
      })
    },
    // 获取商铺列表
    async getUserList(map) {
      // 循环所有坐标，生成坐标点
      this.geometries.forEach((item, index) => {
        this.mapPoint(item, map)
      })
    },
    // 生成坐标点
    mapPoint(point, map) {
      const that = this
      // 生成经纬度对象
      const pdd = new BMapGL.Point(point.longitude, point.latitude)
      // 生成图标
      // var myIcon = new BMapGL.Icon("./src/assets/addressPin.png", new BMapGL.Size(52, 52));
      // 创建标注:参数1：坐标对象；参数2：坐标点样式
      const marker = new BMapGL.Marker(pdd)
      // 将标注添加到地图中
      this.mapOne.addOverlay(marker)
      // 窗口对象参数
      var opts = {
        width: 280, // 信息窗口宽度
        height: 176, // 信息窗口高度
        fontSize: 14
        // title: point.tenantName // 信息窗口标题
      }
      // 窗口内容
      var sContent =
        `<div style="display: flex;"><span style="display: flex; justify-content: flex-end; width: 90px;">工点名称：</span><span style="flex: 1; display: flex;">${point.name}</span></div>` +
        `<div style="display: flex;"><span style="display: flex; justify-content: flex-end; width: 90px;">隶属标段：</span><span style="flex: 1; display: flex;">${point.section}</span></div>` +
        `<div style="display: flex;"><span style="display: flex; justify-content: flex-end; width: 90px;">隶属路线：</span><span style="flex: 1; display: flex;">${point.line}</span></div>` +
        `<div style="display: flex;"><span style="display: flex; justify-content: flex-end; width: 90px;">洞内总人数：</span><span style="flex: 1; display: flex;">${point.peopleCount}</span></div>` +
        "<div style='border: 1px solid #ccc; color: #fff; background-color: #586aa6; border-radius: 3px;text-align: center; margin-top: 10px; margin-right: 8px;' id='bt'>进入</div>"
      // 创建信息窗口对象
      var infoWindow = new BMapGL.InfoWindow(sContent, opts)

      marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, pdd) // 开启信息窗口
        document.getElementById('bt').onclick = async function () {
          await that.$store.dispatch('user/setCode', point.code)
          await that.$store.dispatch('user/setShowId', point.code)

          await that.$store.dispatch('user/setOpentionOne', 'A1Delete')

          that.filterList(point.code)
          that.$router.push({
            path: 'tunnelDiagram'
          })
        }
      })
    },
    async filterList(code) {
      // console.log(this.codeList)
      // let i = this.codeList.length
      // for (i; i >= 0; i--) {
      //   console.log(this.codeList[i])
      //   for (let j = this.codeList[i].length; j >= 0; j--) {
      //     console.log(this.codeList[i][j])
      //     if (this.codeList[i][j].code === code) {
      //       // this.idList = this.codeList[i]
      //       await this.$store.dispatch('user/setIdList', this.codeList[i])
      //     }
      //   }
      // }
      this.codeList.forEach((item) => {
        item.forEach(async (data) => {
          if (data.code === code) {
            await this.$store.dispatch('user/setIdList', item)
          }
        })
      })
    }
  }
}
</script>
